<template>
  <div class="popContent">
    <p class="g-font-14n1b">{{ rows.factorList[index]?.factorName }} </p>
    <p class="g-font-12n2"
      ><span class="title">因子单位：</span>
      <span>{{ rows.factorList[index]?.factorUnit }}</span>
    </p>
    <p class="g-font-12n2"
      ><span class="title">因子来源：</span
      ><span>{{
        rows.factorList[index]?.factorSourceType
          ? FactorSourceTypeMap[
              rows.factorList[index]?.factorSourceType as keyof typeof FactorSourceTypeMap
            ]
          : '-'
      }}</span></p
    >
    <p class="g-font-12n2">
      <span class="title">CO₂：</span>
      <span>{{
        renderStandard(
          rows.factorList[index]?.coEmission,
          'CO₂',
          rows.factorList[index]?.factorUnit
        )
      }}</span></p
    >
    <p class="g-font-12n2">
      <span class="title">CH₄：</span>
      <span>{{
        renderStandard(
          rows.factorList[index]?.chEmission,
          'CH₄',
          rows.factorList[index]?.factorUnit
        )
      }}</span></p
    >
    <p class="g-font-12n2">
      <span class="title">N₂O：</span>
      <span>{{
        renderStandard(
          rows.factorList[index]?.noEmission,
          'N₂O',
          rows.factorList[index]?.factorUnit
        )
      }}</span></p
    >
    <p class="g-font-12n2">
      <span class="title">HFCs/PFCs：</span>
      <span>{{
        renderStandard(
          rows.factorList[index]?.hpEmission,
          'HFCs/PFCs',
          rows.factorList[index]?.factorUnit
        )
      }}</span></p
    >
    <p class="g-font-12n2">
      <span class="title">SF₆：</span>
      <span>{{
        renderStandard(
          rows.factorList[index]?.sfEmission,
          'SF₆',
          rows.factorList[index]?.factorUnit
        )
      }}</span></p
    >
    <p class="g-font-12n2">
      <span class="title">NF₃：</span>
      <span>{{
        renderStandard(
          rows.factorList[index]?.nfEmission,
          'NF₃',
          rows.factorList[index]?.factorUnit
        )
      }}</span></p
    >
  </div>
</template>

<script lang="ts" setup>
import { FactorSourceTypeMap } from '@/constants/enum';
import { defineProps, withDefaults } from 'vue';

interface rowInfo {
  factorName?: string; // 标题
  factorUnit?: string; // 因子单位
  factorSourceType?: string; // 因子来源
  coEmission?: string; // CO₂
  chEmission?: string; //CH₄
  noEmission?: string; // N₂O
  hpEmission?: string; // HFCs/PFCs
  sfEmission?: string; // SF₆
  nfEmission?: string; // NF₃
}
interface factorList {
  factorList?: rowInfo[];
}
interface rows {
  index: number; // 数组索引
  rows: factorList;
}
withDefaults(defineProps<rows>(), {});

const renderStandard = (text: string | number, type: string, factorUnit: string) => {
  let typeStr = type;
  if (type == 'materialNo') {
    typeStr = `(${type})`;
  }
  const unitArr = factorUnit.split('/');
  let unitBefore = unitArr[0] ?? 'kg';
  let unitAfter = unitArr[1] ?? 'kg';
  if (text || text === 0) {
    return text + `${unitBefore}${typeStr}/${unitAfter}`;
  }
  return `-`;
};
</script>

<style lang="scss" scoped>
.popContent {
  p.g-font-12n2 {
    line-height: 22px;
    .title {
      display: inline-block;
      width: 78px;
    }
  }
}
</style>
